<template>
    <div>
        
        <el-row :gutter="24">
            <el-col  :span="6"  v-for="(item,index) in panels" :key="index">
                <el-card shadow="hover" class="border-0">
                <template #header>
                <div class="flex justify-between ">
                   <span class="text-sm">{{ item.title }}</span>
                   <el-tag
                    :type="item.unitColor"
                    effect="plain"
                   >
                   {{ item.unit }}

                   </el-tag>    

                
                </div>
                </template>
                <span class="text-3xl font-bold text-gray-500">
                    <CountTo :value="item.value" />
                   
                    
                </span>
                <el-divider/>
                <div class="flex justify-between text-sm text-gray-500">
                    <span>{{ item.subTitle }}</span>
                    <span>{{ item.subValue }}</span>
                </div>
                </el-card>
            </el-col>
  
        </el-row>
        <el-row :gutter="24" class="mt-10">
            <el-col :span="3" v-for="(item,index) in panels2" :key="index">
                <div>
                    <el-card shadow="hover" @click="$router.push('/goods/list')">
                    
                        <div class="flex flex-col items-center justify-center cursor-pointer">
                          
                            <el-icon :size="25" class="text-purple-500"><component :is="item.icon"></component> </el-icon>
                          
                            <span class="text-sm">{{ item.title }}</span>
                        </div>

                    </el-card>
   
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="12" :offset="0" v-permission="['myChart,GET']">
                <IndexChart/>
            </el-col>
            <el-col :span="12" :offset="0">
                <el-card shadow="never" >
                    <template #header>
                    <div class="flex justify-between">
                        <span>店铺及商品展示</span>
                        <el-tag type="danger" effect="plain">wddqw</el-tag>
                    </div>
                    </template>
                    <div class="flex justify-between " >
                        
                            <el-card shadow="hover"  class="border-0 bg-light-400">
                        
                            <div class="flex flex-col items-center justify-center p-0" >
                                <span>1</span>
                                <span class="text-gray-500">代付款</span>
                            </div>
                            </el-card>
                      
                       
                            <el-card shadow="hover"  class="border-0 bg-light-400">
                        
                            <div class="flex flex-col items-center justify-center">
                                <span>10</span>
                                <span>销售中</span>
                            </div>
                            </el-card>
                            <el-card shadow="hover"  class="border-0 bg-light-400">
                        
                            <div class="flex flex-col items-center justify-center">
                                <span>10</span>
                                <span>运输中</span>
                            </div>
                            </el-card>
                            <el-card shadow="hover"  class="border-0 bg-light-400">
                        
                            <div class="flex flex-col items-center justify-center">
                                <span>10</span>
                                <span>热卖中</span>
                            </div>
                            </el-card>
                        
                    </div>
                    
                    
                    
                    
                </el-card>
                
            </el-col>
        </el-row>
    </div>
    
</template>
<script setup>
import { indexData } from "@/api/index.js"
import { ref } from "vue"
import CountTo from "@/components/CountTo.vue";
import { useRoute } from 'vue-router';
import IndexChart from "@/components/IndexChart.vue";
import { usePageStore } from "@/stores/page.js"
const pageStore = usePageStore()
const route = useRoute()
const panels = ref([])
const panels2 = ref([])
indexData()
.then(res=>{
    console.log(res)
    panels.value = res.data
    // console.log(panels.value)
    panels2.value = res.data2
    console.log(panels.value)

})
</script>
